<template>
  <ul>
    <!-- <todo
      v-for="item of data"
      :key="item.id"
      :item="item"
      @change-checkbox="changeCheckbox"
      @remove-todo="removeTodo"
    /> -->
    <todo 
      v-for="item of data" 
      :key="item.id" 
      :item="item" 
      @dispatch="dispatch"  />
  </ul>
</template>

<script>
import Todo from './Todo.vue';

export default {
  name: 'Todos',
  components: {
    Todo
  },
  props: {
      data : Array
  },
  methods: {
    // changeCheckbox(id) {
    //   this.$emit('changeCheckbox', id);
    // },
    // removeTodo(id) {
    //   this.$emit('removeTodo', id);
    // }
    dispatch(...arg){
      this.$emit('dispatch', ...arg);
    }
  }
}
</script>

<style>
ul {
  list-style: none;
}
</style>
